<template>
    <div class="login-page" id="login-page">
          <section class="login-page.container">
             <div class="login-page.ikon">
                  <img src="../../assets/images/login/login-ikon.png" alt="">
             </div>
             <div>
                 <div class="login-page.info">
                     <img :src="$store.getters.store_system_config.logo" alt="LOGO">
                     <span id="login-name">{{$store.getters.store_system_config.alias}}机器人管理平台</span>
                 </div>
                 <div class="login-page.content">
                     <LoginForm></LoginForm>  
                 </div>
             </div>
          </section>
    </div>
</template>
<script>
import LoginForm from "./form";
import { toolsMixin } from "utils/mixins";
export default {
    name:'Login',
    mixins: [toolsMixin],
    components: {
        LoginForm
    },
    mounted() { 
        this.setThemeColor([
            { el: 'login-page', property: 'backgroundColor'},
            { el: 'login-name', property: 'color'}
        ]);
    },
}
</script>
<style lang="scss">
 @include component(login-page){
     width: 100%;
     height: 100vh;
     background-color: #dedede;
     background: var(--theme-color);
     background-image: url('../../assets/images/login/bg.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     @include part(container){
        position: absolute;
        width: 1000px;
        height: 600px;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: #FFFFFF;
        box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.25);
        border-radius: 8px;
        padding: 50px 100px;
        box-sizing: border-box;
        > div {
            display: inline-block;
            width: 50%;
            height: 100%;
            vertical-align: top;
            box-sizing: border-box;

        }
     }
     @include part(ikon){
         > img{
             width: 100%;
             height: 100%;
             display: block;
         }
     }
     @include part(info){
          padding-top: 22px;
          box-sizing: border-box;
          > img {
               width: 46px;
               height: 46px;
               display: block;
               margin: 0 auto 40px;
          }
          > span {
                font-size: 24px;
                line-height: 32px;
                letter-spacing: 3px;
                color: var(--theme-color);
                text-align: center;
                display: block;
                margin: 0 auto 50px;
          }
     }
     @include part(content){
         width: 100%;
         height: calc(100% - 80px);
         overflow: hidden;
}
 }
</style>